<template>
    <div class="person">
        <el-form ref="personData" :model="personData" size="small">
            <el-col :span="12">
                <el-form-item label="头像" style="margin-left: 400px;margin-top: 20px">
                    <el-upload
                            style="margin-top: 30px"
                            accept="image/*"
                            class="avatar-uploader"
                            :action="fileUpload"
                            :auto-upload="true"
                            :headers="headerObject"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="暂无">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="12" style="margin-left: -200px">
                <el-form-item label="用户名" prop="username">
                    {{personData.username}}
                </el-form-item>
                <el-form-item label="手机" prop="phoneNumber">
                    {{personData.phone}}
                </el-form-item>
                <p>地址：</p>
                <el-form-item label="省">
                    <el-select v-model="valueProvince" placeholder="选择省" @change="changeProvince"
                               :style="{width: '30%'}">
                        <el-option v-for="item in provinceOptions" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="市">
                    <el-select v-model="valueCity" placeholder="选择市" @change="changeCity" clearable
                               :style="{width: '30%'}">
                        <el-option v-for="item in cityOptions" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区/县">
                    <el-select v-model="valueOrigin" placeholder="选择区/县" @change="changeOrigin" clearable
                               :style="{width: '30%'}">
                        <el-option v-for="item in originOptions" :key="item.label" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <p>个性签名：</p>
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="personData.motto">
                </el-input>
                <el-button type="success" icon="el-icon-upload2" size="small" :disabled="isSubmit" @click="update">更 新</el-button>
            </el-col>
        </el-form>

    </div>
</template>

<script>
    import {areaList} from '@/utils/provices'
    import {editTourist,oss} from '@/api/index'

    export default {
        name: "Personal",
        data() {
            return {
                id:undefined,
                areaList: areaList,
                personData: {
                    avatar: '',
                    address: undefined,
                    motto: undefined
                },
                valueProvince: null,
                valueCity: null,
                valueOrigin: null,
                provinceOptions: [], // 省列表
                cityOptions: [], // 市下拉框数据
                originOptions: [], // 区下拉框数据
                imageUrl: require('@/assets/images/default.jpg'),
                fileUpload: '',
                isSubmit: false,
                headerObject: {
                    Authorization: window.sessionStorage.getItem('token')
                } // 图片上传请求头

            }
        },
        created() {
            this.buildProvesData()
            this.LoginInfo()
        },
        methods: {
            update(){
                this.personData.address = this.valueProvince + '/' + this.valueCity + '/' + this.valueOrigin
                editTourist(this.personData, this.id).then(response => {
                    if(response.code==200){
                        window.sessionStorage.removeItem("LoginInfo");
                        this.$router.push({path:'/login'})
                        return this.$message({
                            message: '更新成功,请重新登录',
                            type: 'success'
                        })
                    }else{
                        return this.$message({
                            message: '更新失败',
                            type: 'error'
                        })
                    }
                })
            },
            LoginInfo() {
                this.fileUpload = "http://localhost:8080/lease/api/system/oss/upload"
                console.log(this.fileUpload)
                let data= JSON.parse(sessionStorage.getItem("LoginInfo"));
                this.personData=data
                this.imageUrl=data.avatar
                this.id=data.id
                const strs = this.personData.address.split('/')
                this.valueProvince = strs[0]
                this.valueCity = strs[1]
                this.valueOrigin = strs[2]
                console.log(this.personData)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
            },
            handleAvatarSuccess(res, file) {
                if (res.code === 200) {
                    this.imageUrl = URL.createObjectURL(file.raw)
                    this.personData.avatar = res.data
                } else {
                    this.$message.error(res.message)
                }
            },
            changeProvince(val) {
                this.valueCity = ''
                this.valueOrigin = ''
                this.cityOptions = []
                this.originOptions = []
                this.provinceOptions.forEach((province) => {
                    if (val.toString() === province.value) {
                        this.valueProvince = province.label
                        this.cityOptions = province.children
                    }
                })
            },
            changeCity(val) {
                this.valueOrigin = ''
                this.originOptions = []
                this.cityOptions.forEach((city) => {
                    if (val.toString() === city.value) {
                        this.valueCity = city.label
                        this.originOptions = city.children
                    }
                })
            },
            changeOrigin(val) {
                this.originOptions.forEach((origin) => {
                    if (val.toString() === origin.value) {
                        this.valueOrigin = origin.label
                    }
                })
                this.$forceUpdate()
            },
            /**
             * 构造省市县下拉框数据
             */
            buildProvesData() {
                // 构造省数据
                const provinces = this.areaList.province_list
                for (const value in provinces) {
                    this.provinceOptions.push({
                        value: value,
                        label: provinces[value],
                        children: []
                    })
                }

                // 构造市数据
                const cities = this.areaList.city_list
                this.provinceOptions.forEach(province => {
                    for (const city in cities) {
                        if (province.value.substr(0, 2) === city.substr(0, 2)) {
                            province.children.push({
                                value: city,
                                label: cities[city],
                                children: []
                            })
                        }
                    }
                })

                // 构造区县数据
                const counties = this.areaList.county_list
                this.provinceOptions.forEach(province => {
                    province.children.forEach(city => {
                        for (const county in counties) {
                            if (city.value.substr(0, 4) === county.substr(0, 4)) {
                                city.children.push({
                                    value: county,
                                    label: counties[county],
                                    children: []
                                })
                            }
                        }
                    })
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .person {
        height: 500px;
        background-color: #eaeaea;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
